<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: charles
 * @LastEditTime: 2021-07-14 15:18:48
-->
<template>
  <div ref="root" style="height: 95%"></div>
</template>

<script>
// 引入g2plot
// 对象的解构
import { Line } from "@antv/g2plot";
import { ref, onMounted } from "vue";
export default {
  setup() {
    // 获取到容器
    const root = ref(null);
    // 将实例化对象的函数封装起来
    let initChart = () => {
      const data = [
        {
          date: "1月",
          type: "12345热线",
          value: 4623,
        },
        {
          date: "1月",
          type: "12301热线",
          value: 2208,
        },
        {
          date: "2月",
          type: "12345热线",
          value: 6145,
        },
        {
          date: "2月",
          type: "12301热线",
          value: 2016,
        },
        {
          date: "3月",
          type: "12345热线",
          value: 257,
        },
        {
          date: "3月",
          type: "12301热线",
          value: 508,
        },
        {
          date: "4月",
          type: "12345热线",
          value: 2916,
        },
        {
          date: "4月",
          type: "12301热线",
          value: 6268,
        },
        {
          date: "5月",
          type: "12345热线",
          value: 4512,
        },
        {
          date: "5月",
          type: "12301热线",
          value: 428,
        },
        {
          date: "6月",
          type: "12345热线",
          value: 6411,
        },
        {
          date: "6月",
          type: "12301热线",
          value: 8281,
        },

      ];
      // 实例化一个Colunm对象
      const line = new Line(root.value, {
        data,
        xField: "date",
        yField: "value",
        yAxis: {
          label: {
            // 数值格式化为千分位
            formatter: (v) =>
              `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
          },
        },
        seriesField: "type",
        color: ({ type }) => {
          return type === "12345热线"? "#F4664A":'#30BF78' ;
        },
        lineStyle: ({ type }) => {
          if (type === "register") {
            return {
              lineDash: [4, 4],
              opacity: 1,
            };
          }
          return {
            opacity: 0.5,
          };
        },
      });
      // 渲染
      line.render();
    };
    onMounted(initChart);
    return {
      root,
    };
  },
};
</script>